<template>
  <view class="user-center page-content">
    <div class="menu-section">
      <up-cell-group :border="false">
        <up-cell v-for="(item, index) in menuItems" :key="index" :title="item.name"
          :titleStyle="{ fontSize: '28rpx', color: '#333333' }" is-link @click="handleMenuClick(item)"
          :border="index == menuItems.length - 1 ? false : true">
          <template #icon>
            <image :src="item.icon" mode="widthFix" class="menu-icon"></image>
          </template>
        </up-cell>
      </up-cell-group>
    </div>
  </view>
</template>

<script setup>

// 基础菜单项数据
const menuItems = [
  {
    name: "道闸车牌识别管理",
    icon: "/static/images/bill@2x.png",
    action: "deviceInfo",
    path: "/pages/base-manage/devices/plate-recogni",
  },
  {
    name: "智能物联地磁管理",
    icon: "/static/images/bill@2x.png",
    action: "deviceInfo",
    path: "/pages/base-manage/devices/geomagnetic",
  },
  {
    name: "免布线视频桩管理",
    icon: "/static/images/bill@2x.png",
    action: "deviceInfo",
    path: "/pages/base-manage/devices/low-video",
  },
  {
    name: "智能高位视频管理",
    icon: "/static/images/bill@2x.png",
    action: "deviceInfo",
    path: "/pages/base-manage/devices/high-video",
  },
  {
    name: "物联网阻车器管理",
    icon: "/static/images/bill@2x.png",
    action: "deviceInfo",
    path: "/pages/base-manage/devices/parkinglock",
  },
  {
    name: "智能巡检设备管理",
    icon: "/static/images/bill@2x.png",
    action: "deviceInfo",
    path: "/pages/base-manage/devices/inspect",
  },
  {
    name: "智能物联闸机管理",
    icon: "/static/images/bill@2x.png",
    action: "deviceInfo",
    path: "/pages/base-manage/devices/gete",
  },
  {
    name: "ETC天线设备管理",
    icon: "/static/images/bill@2x.png",
    action: "deviceInfo",
    path: "/pages/base-manage/devices/antenna",
  },
];

// 处理菜单点击事件
const handleMenuClick = (item) => {
  // 跳转到对应页面
  if (item.path) {
    uni.navigateTo({
      url: item.path,
    });
  }
};
</script>

<style lang="scss" scoped>
.user-center {
  padding: 30rpx;

  ::v-deep {
    .u-cell__body {
      padding: 28rpx 15px !important;
    }
  }

  .menu-section {
    margin-bottom: 20rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.08);
    border-radius: 24rpx;
    overflow: hidden;
    padding: 18rpx 28rpx 18rpx;

    .menu-icon {
      width: 44rpx;
      height: 44rpx;
      margin-right: 20rpx;
    }
  }
}
</style>
